<template>
  <view class="kkAudio">
    <image
      class="kkAudio-playOrPauseBtn"
      :class="{
        'kkAudio-playOrPauseBtnOther': data.from === KKConversationFrom.other,
      }"
      :src="audioPlayIcon"
      @tap="audioPlayOrPauseBtnClick"
    ></image>
    <slider
      v-if="data.from === KKConversationFrom.me"
      class="kkAudio-slider"
      :value="slideValue"
      activeColor="#fff"
      backgroundColor="rgba(255,255,255,0.2)"
      :block-size="12"
      :disabled="disable"
      block-color="#D9D9D9"
      @change="sliderChange"
      @changing="sliderChanging"
    />
    <slider
      v-if="data.from === KKConversationFrom.other"
      class="kkAudio-slider"
      :value="slideValue"
      activeColor="#111111"
      backgroundColor="#D9D9D9"
      :block-size="12"
      :disabled="disable"
      block-color="#111111"
      @change="sliderChange"
    />
    <view
      class="kkAudio-time"
      :class="{
        'kkAudio-timeOther': data.from === KKConversationFrom.other,
      }"
      >{{ audioCurrentTime }}</view
    >
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted } from "vue";
import { audioDurationTimeStr } from "@/utils/util";
import {
  KKConversationFrom,
  KKConversationType,
} from "@/pagesA/answer/components/conversitonEnum";
import { getFileUrl } from "@/utils/util";

import audio_play from "@/pagesA/static/images/chat/audio_play.png";
import audio_pause from "@/pagesA/static/images/chat/audio_pause.png";
import audio_play_black from "@/pagesA/static/images/chat/audio_play_black.png";
import audio_pause_black from "@/pagesA/static/images/chat/audio_pause_black.png";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  disable: {
    type: Boolean,
    default: false,
  },
});
const slideValue = ref(0);
const playStatus = ref(0); // 0 暂停 1 播放中
const audioCurrentTime = ref("");
const audioDuration = ref(props.data?.duration || 0);

audioCurrentTime.value = audioDurationTimeStr(audioDuration.value);

const audioPlayIcon = computed(() => {
  if (props.data.from === KKConversationFrom.me) {
    return playStatus.value === 0 ? audio_play : audio_pause;
  } else if (props.data.from === KKConversationFrom.other) {
    return playStatus.value === 0 ? audio_play_black : audio_pause_black;
  }
});

const audioUrl = () => {
  return getFileUrl(props.data.text) || "";
};

if (audioDuration.value === 0) {
  const tempAudioContext = uni.createInnerAudioContext();
  tempAudioContext.src = audioUrl();
  tempAudioContext.play();
  tempAudioContext.onTimeUpdate(() => {
    audioCurrentTime.value = audioDurationTimeStr(
      tempAudioContext.duration || 0
    );
    tempAudioContext.stop();
  });
}

const currtentPlayAudioIdKey = "KKCurrtentPlayAudioId";

const audioContext = uni.createInnerAudioContext();

audioContext.onPlay(() => {
  console.log("开始播放");
  playStatus.value = 1;
});
audioContext.onError((err) => {
  console.log(err);
  playStatus.value = 0;
  slideValue.value = 0;
});
audioContext.onEnded(() => {
  console.log("播放结束");
  playStatus.value = 0;
  slideValue.value = 0;
});
audioContext.onTimeUpdate(() => {
  if (uni.getStorageSync(currtentPlayAudioIdKey) !== `${props.data.id}`) {
    if (audioContext.src) {
      audioContext.pause();
      playStatus.value = 0;
      return;
    }
  }
  //播放时间
  audioDuration.value = audioContext.duration;
  var time = audioContext.currentTime.toFixed(0);
  var min = Math.floor(time / 60);
  var second = time % 60;
  const timeStr =
    (min >= 10 ? min : "0" + min) +
    ":" +
    (second >= 10 ? second : "0" + second);
  audioCurrentTime.value = timeStr;
  //计算进度
  slideValue.value = Math.floor((time / audioContext.duration) * 100);
});

const firstBeginSeek = ref(false);
// 音频
const audioPlayOrPauseBtnClick = () => {
  if (props.disable) {
    return;
  }
  if (playStatus.value === 0) {
    // 暂停 - 播放
    if (!audioContext.src) {
      audioContext.src = audioUrl();
      audioContext.seek(firstBeginSeek.value);
      firstBeginSeek.value = 0;
    }
    uni.setStorageSync(currtentPlayAudioIdKey, `${props.data.id}`);
    playStatus.value = 1;
    audioContext.play();
  } else if (playStatus.value === 1) {
    // 播放 - 暂停
    playStatus.value = 0;
    audioContext.pause();
    sliderEndIsNeedPlay.value = false;
  }
};

const sliderEndIsNeedPlay = ref(false);

const sliderChanging = (e: any) => {
  slideValue.value = e.detail.value;
  audioCurrentTime.value = audioDurationTimeStr(
    Math.floor((slideValue.value / 100) * audioDuration.value)
  );
  if (playStatus.value === 1) {
    audioContext.pause();
    playStatus.value = 0;
    sliderEndIsNeedPlay.value = true;
  } else {
    sliderEndIsNeedPlay.value = false;
  }
};
const sliderChange = (e: any) => {
  slideValue.value = e.detail.value;
  audioCurrentTime.value = audioDurationTimeStr(
    Math.floor((slideValue.value / 100) * audioDuration.value)
  );
  if (!audioContext.src) {
    firstBeginSeek.value = (slideValue.value / 100) * audioDuration.value;
  } else {
    audioContext.seek((slideValue.value / 100) * audioDuration.value);
  }
  if (sliderEndIsNeedPlay.value) {
    audioContext.play();
    playStatus.value === 1;
  }
};

onUnmounted(() => {
  if (playStatus.value === 1) {
    audioContext.stop();
  }
});
</script>

<style lang="scss" scoped>
.kkAudio {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  &-playOrPauseBtn {
    width: 48rpx;
    height: 48rpx;
  }

  &-playOrPauseBtnOther {
  }

  &-slider {
    margin-left: 24rpx;
    margin-right: 24rpx;
    width: calc(100% - 96rpx - 78rpx);
  }
  &-time {
    margin-left: auto;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 33rpx;
  }
  &-timeOther {
    color: #000;
  }
}
:deep(.uni-slider-handle-wrapper) {
  border-radius: 4rpx;
  height: 8rpx;
}
</style>
